<template>
  <div ref="vantaRef" class="main">
    <div class="total-group">
      <el-row>
        <el-col :span="12" :offset="16"><h3>当前时间：{{nowTime}}</h3></el-col>
      </el-row>
      <el-divider>角色统计</el-divider>
      <div class="count-group">
        <el-row :gutter="20">
          <el-col v-for="(role,key) in roleList" :key="key" :span="6">
            <div>
              <el-statistic group-separator="," :value="role.count" :title="role.name"></el-statistic>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-divider>部门统计</el-divider>
      <div class="dept-group">
        <el-row :gutter="20">
          <el-col v-for="(dept,key) in deptList" :key="key" :span="6">
            <div>
              <el-statistic group-separator="," :value="dept.count" :title="dept.name"></el-statistic>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="display: flex">
        <div class="left">
          <el-divider>历史用车次数统计</el-divider>
          <div>
            <div class="chart" id="chart" :style="myChartStyle"></div>
          </div>
        </div>
        <div class="right">
          <el-divider>汽车种类分析图</el-divider>
          <div>
            <div id="pieReport" :style="myChartStyle"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="three.r134.min.js"></script>
<script src="vanta.birds.min.js"></script>

<script>
import * as echarts from 'echarts'
import * as THREE from 'three'//导入样式
import BIRDS from 'vanta/src/vanta.birds'//导入动态样式逻辑

export default {
  name: 'AboutView',
  data () {
    return {
      deptTotal: 0,
      roleList: [],
      deptList: [],
      xInfo: [], // 横坐标
      yInfo: [], // 数据
      charts: '',
      opinion: ['轿车', 'SUV', '商务车'],
      opinionData: [
        { value: 12, name: '轿车', itemStyle: '#1ab394' },
        { value: 10, name: 'SUV', itemStyle: '#1ab123' },
        { value: 18, name: '商务车', itemStyle: '#79d2c0' }
      ],
      myChartStyle: { display: 'flex', width: '500px', height: '280px' }, // 图表样式
      nowTime: ''
    }
  },
  methods: {
    getRoleList () {
      this.$http.get('about/selectRole').then(data => {
        this.roleList = [...data]
      })
    },
    getDeptList () {
      this.$http.get('about/selectDept').then(data => {
        this.deptList = [...data]
        this.deptTotal = this.deptList.length
      })
    },
    getTime () {
      const date = new Date()
      this.nowTime = date.getFullYear() + '年' +
        (date.getMonth() >= 10 ? date.getMonth() : '0' + date.getMonth()) + '月' +
        (date.getDay() >= 10 ? date.getDay() : '0' + date.getDay()) + '日' +
        (date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()) + '时' +
        (date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()) + '分' +
        (date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()) + '秒'
    },
    initEcharts () {
      this.$http.get('about/selectApply').then(data => {
        this.xInfo = data.map(item => (item.name))
        this.yInfo = data.map(item => (item.count))
        // 基本柱状图
        const option = {
          xAxis: {
            data: this.xInfo
          },
          yAxis: {},
          series: [
            {
              type: 'bar', // 形状为柱状图
              data: this.yInfo,
              label: {
                show: true,
                position: 'top'
              }
            }
          ]
        }
        const myChart = echarts.init(document.getElementById('chart'))
        myChart.setOption(option)
        // 随着屏幕大小调节图表
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      })
    },
    drawPie (id) {
      this.$http.get('about/selectCar').then(data => {
        for (let i = 0; i < this.opinionData.length; i++) {
          this.opinionData[i] = { ...this.opinionData[i], ...data[i] }
        }
        console.log(this.opinionData)
        this.charts = echarts.init(document.getElementById('pieReport'))
        this.charts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
          },
          legend: {
            bottom: 10,
            left: 'center',
            data: this.opinion
          },
          series: [
            {
              name: '车辆数',
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              data: this.opinionData
            }
          ]
        })
      })
    }

  },
  mounted () {
    this.initEcharts()
    this.$nextTick(function () {
      this.drawPie('pieReport')
    })
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
    // 修改颜色时 cells 需要全大写字母 可生效
    VANTA.BIRDS({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      backgroundColor: 0xd4e0ef
    });
  },
  created () {
    this.getRoleList()
    this.getDeptList()
    this.getTime()
    setInterval(() => {
      this.getTime()
    }, 1000)
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>

<style scoped lang="scss">

.main{
  //background: url("@/assets/about.jpg") no-repeat center/cover;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .count-group{
    margin-bottom: 10px;
  }
  .chart{
    margin-top: 15px;
    overflow: auto;
  }
  .left{
    width: 50%;
  }
  .right{
    width: 50%;
  }
}

</style>
